<template>
  <div v-if="sureAdmin">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>商品销量</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div class="echartsWrapper">
        <div class="selectDate">
          <el-switch
            style="display: block; margin-bottom: 20px"
            v-model="checkDate"
            @change="changeCheckDate"
            active-color="#13ce66"
            inactive-color="#409EFF"
            active-text="总销量榜"
            inactive-text="当月销量榜"
          >
          </el-switch>
          <!-- <el-date-picker
            v-model="date"
            :type="sureDate"
            @change="changeDate"
            :clearable="false"
            :value-format="dateFormat"
          ></el-date-picker> -->
        </div>
        <div id="commodityEcharts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 1. 导入 echarts
import echarts from "echarts";
export default {
  data() {
    return {
      MilkTeaOpinion: {
        title: {
          text: "商品销售额",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                // debugger;
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 8; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总销量",
            type: "bar",
            barWidth: "60%",
            data: [],
          },
        ],
      },
      checkDate: true,
      date: "",
      sureAdmin: false,
      queryInfo: {
        type: 1,
      },
    };
  },
  created() {
    var Admin = window.localStorage.getItem("admin");
    if (Admin == 1) {
      this.sureAdmin = true;
      this.getNowTime();
      this.getMilkTeaVolume();
    } else {
      this.sureAdmin = false;
    }
  },
  mounted() {},
  methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      month = month + 1;
      month = month.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}`;
      this.date = defaultDate;
    },
    async getMilkTeaVolume() {
      if (this.checkDate) {
        var { data: res } = await this.$http.get(
          "statistics2/totalVolume?type=2"
        );
        this.MilkTeaOpinion.title.text="商品总销量前十榜"
      }else{
        var { data: res } = await this.$http.get(
          "statistics2/monthVolume?date="+this.date+"&type=2"
        );
        this.MilkTeaOpinion.title.text="商品"+this.date+"月销量前十榜"
      }
      this.MilkTeaOpinion.xAxis[0].data = res.data.name;
      this.MilkTeaOpinion.series[0].data = res.data.volume;

      this.drawBarchart();
    },
    drawBarchart() {
      var myChart = echarts.init(
        document.getElementById("commodityEcharts"),
        "light"
      );
      myChart.setOption(this.MilkTeaOpinion);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    changeCheckDate() {
      this.getMilkTeaVolume();
    },
  },
};
</script>

<style lang="less" scoped>
#commodityEcharts {
  width: 80%;
  height: 500px;
}
</style>